<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img alt="" id="oImg">
  <input type="file" hidden id="oFile">
  <span id="oBtn">上传按钮</span>
  <!-- #1. 准备 type=file 框并通过 hidden 隐藏 -->
  <!-- #2. 点击上传按钮，触发 input=file 框的点击事件 -->
  <!-- #3. 监听 input=file 框的 onChange 事件 -->
  <!-- #4. 通过 e.target.files 拿到图片信息 -->
  <!-- #5. 创建 FormData 对象，把获取到的文件信息添加进去 -->
  <!-- #6. 使用 Axios 把 FormData 传到后端 -->
  <script>
    oBtn.onclick = function () {
      oFile.click()
    }
    oFile.onchange = function (e) {
      console.log('hello')
      // console.log(e.target.files[0])
      // console.log(this.files[0])
      const fd = new FormData()
      fd.append('avatar', this.files[0])

      // 预览有 2 种思路：上传后后端之后，后端会给一个 url 地址，前端拿到之后给图片的 src
      // 前端有对应的 API 可以把图片转成 Blob 或 Base64，然后给图片的 src
      // oImg.src = URL.createObjectURL(this.files[0])

      const fr = new FileReader()
      fr.readAsDataURL(this.files[0])
      fr.onload = function (e) {
        // e.target.result
        oImg.src = this.result
      }
      /* axios({
        method: 'POST',
        url: '/upload',
        data: fd
      }) */

      this.value = ''
    }
  </script>
</body>

</html>